<template>
    <div>
        <top></top>
        <div class="cartList">
            <el-table :data="cartData" border @cell-click="handleCurrentChange">
                <el-table-column prop="itemName" label="商品名称"></el-table-column>
                <el-table-column prop="listprice" label="单价"></el-table-column>
                <el-table-column prop="count" label="数量">
                    <template slot-scope="{ row }">
                        <el-input-number v-model="row.count" :min="1" :max="10" @change="updateCart"></el-input-number>
                    </template>
                </el-table-column>
                <el-table-column prop="totalprice" label="小计"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="{ row }">
                        <el-button type="danger" size="small" @click="removeItem(row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="cart-summary">
                <span>总计：{{ total }}</span>
                <el-button type="primary" size="medium" @click="checkout">去结算</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import axios from "axios";
import top from "@/components/common/top.vue";

export default {
    components: {top},
    mounted() {
        this.cartList()
    },
    data() {
        return {
            cartData: [
                {id: 1, name: '商品1', price: 50, quantity: 1},
                {id: 2, name: '商品2', price: 100, quantity: 2}
            ]
        }
    },
    computed: {
        total() {
            return this.cartData.reduce((total, item) => {
                return total + item.listprice * item.count
            }, 0)
        }
    },
    methods: {
        handleCurrentChange(row, column) {
            let itemId = row.itemId
            let count = row.count
// 更新购物车数据
            if (column.label === "数量") {
                axios({
                    method: 'put',
                    url: '/carts/items',
                    data: {
                        count: count,
                        itemId: itemId
                    },
                    headers: {
                        "token": window.sessionStorage.getItem("token")
                    }
                }).then(res => {
                    // console.log(res.data)
                    // console.log(raw)
                    // console.log("数量",count)
                    // console.log("单价",raw.listprice)
                    // console.log("总价", Number(count) * Number(raw.listprice))
                    console.log(this.cartData)
                    console.log(Number(count))
                    console.log(Number(row.listprice))
                    console.log(row.totalprice)

                    row.totalprice = Number(count) * Number(row.listprice)
                    // console.log(this.cartData.totalPrice)

                })
            }
        },
        updateCart(index, row) {
            // 更新购物车数据
            // console.log(row)
            // axios({
            //   method:'put',
            //   url:'/carts/items',
            //   data:{
            //     count:this.count,
            //     itemId:this.row.itemId
            //   },
            //   headers:{
            //     "token":window.sessionStorage.getItem("token")
            //   }
            // }).then(res=>{
            //   console.log(res.data)
            //   console.log(window.sessionStorage.getItem("item_id"))
            //
            // })

        },
        removeItem(row, column) {
            // 删除商品
            console.log(row)
            axios({
                url: `/carts/items/${row.itemId}`,
                method: 'delete',
                headers: {
                    "token": window.sessionStorage.getItem("token")
                }
            }).then(res => {
                console.log(res)
                this.cartList()
            })
        },
        checkout() {
            // 去结算
            this.$router.push({
                name: 'payment',
                params: {
                    isGouWuChe: true,
                    cartData: this.cartData
                }
            })
        },
        cartList() {
            axios({
                method: 'GET',
                url: '/carts/items',
                headers: {
                    "token": window.sessionStorage.getItem("token")
                }
            }).then((result) => {
                this.cartData = result.data.data;
                console.log(this.cartData)
            })
        }
    }
}
</script>

<style scoped>
.cartList {
    margin: 20px;
}

.cart-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}
</style>